<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title><?=$name?>商品列表</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,user-scalable=1" />
    <meta name="format-detection" content="telephone=no,email=no" />
    <meta name="mobileOptimized" content="width" />
    <meta name="handheldFriendly" content="true" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" href="/static/css/main.css" />
    <script src="/static/script/zepto.min.js"></script>
</head>
<body class="m-cate-list">

<?php if(empty($list)) {?>
    <h3 class="m-no-info">暂无可售商品</h3>
<?php } else {?>
<ul class="f-cb" id="J_forRun">
    <?php foreach($list as $item) {?>
        <li class="J_forLink" data-url="<?= Yii::$app->request->hostInfo . '/web/product/detail?pid=' . $item['pid']?>">
        <img src="<?=$item['thumb'].'@1e_1c_0o_0l_150h_150w_100q.jpg'?>" />
        <a href="../product/detail?pid=<?=$item['pid']?>"><?=$item['name']?></a>
        <b>￥ <?=$item['price']?></b>
        </li>
    <?php }?>
</ul>
<?php }?>

<img class="u-load" id="J_loading" src="/static/img/loading.gif" />

<div class="m-nav f-cb u-bg1">
    <a href="/">首页</a>
    <a href="javascript:;" class="z-on">分类</a>
    <a href="/web/cart/view?shop_id=<?= '1001'//yii::$app->session->get('shop_id')?>">购物车</a>
    <a href="/web/my">我的</a>
</div>

<script>
    $(function(){

        var img = $('#J_forRun').find('img');
        img.height(img.eq(0).width()-2);

        // 商品 区域链接 点击
        // demo <li class="J_forLink" data-url="http://git.oschina.net/">
        $(document.body).on('tap', '.J_forLink', function(){

            window.location.href = $(this).attr('data-url');
        });


        // J_forRun
        var _loading = $('#J_loading');
        var forRun = document.getElementById('J_forRun');
        var start = 0, flag = true, page = 2;
        forRun.addEventListener('touchstart', function(ev){ start = ev.touches[0].pageY; }, false);
        forRun.addEventListener('touchmove', function(ev){

            // 筛选栏显示与隐藏
            var end = ev.touches[0].pageY - start;
            if(end > 0){

                flag = true;
            }else{

                // 控制上拉加载
                if($(document).height() == ($(window).scrollTop() + $(window).height()) && flag){

                    // 加载锁定
                    flag = false;

                    // 先显示 加载中...
                    _loading.css({display:'block'});

                    $.ajax({ url: 'product-list?funcName=?', dataType:'jsonp', data:{'page':page,'pre-page':20,'shop_id':1001,'cid':<?=$shop_cid?>}, timeout:5000,

                        success: function(_info){

                            page++;

                            // 请求成功后 隐藏 加载中...
                            _loading.css({display:'none'});

                            console.log(_info);

                            $('#J_forRun').append(createList(_info));

                            // 加载解锁
                            flag = true;
                        }
                    });

                }
            }

        }, false);
    });

    function createList(_data){

        var _li = '';

        for(var i in _data){
            _li += '<li class="J_forLink" data-url="../product/detail?pid=' + _data[i]['id'] + '"?><img src="'+ _data[i]['img'] +'" style="height: 159px"/><a href="../product/detail?pid=' + _data[i]['id'] + '">'+ _data[i]['title'] +'</a><b>￥ '+ _data[i]['price'] +'</b></li>';
        }

        return _li;
    }
</script>
</body>